{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block title %}{% translate '修改虚拟机' %}{% endblock %}

{% block head %}{% endblock %}

{% block boby %}
    <div class="container-fluid col-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title">{% translate '修改虚拟机' %}</span>
                <span><a class="btn btn-sm btn-primary float-right" href="{% url 'vms:vms-list' %}">
                    虚拟机列表
                </a></span>
            </div>
            <div class="card-body">
                <div class="offset-sm-0 offset-md-1">
                    <dl class="row">
                        <dt class="col-2 text-right">{% translate '虚拟机UUID' %}:</dt> <dd class="col-10" id="id-edit-vm-uuid">{{ vm.hex_uuid }}</dd>
                        <dt class="col-2 text-right">{% translate '虚拟机IP' %}:</dt> <dd class="col-10">{{ vm.ipv4 }}</dd>
                        <dt class="col-2 text-right">{% translate '镜像' %}:</dt> <dd class="col-10">{{ vm.image_name }}</dd>
                        <dt class="col-2 text-right">{% translate '数据中心' %}:</dt> <dd class="col-10">{{ vm.host.group.center }}</dd>
                        <dt class="col-2 text-right">{% translate '机组' %}:</dt> <dd class="col-10">{{ vm.host.group }}</dd>
                        <dt class="col-2 text-right">CPU:</dt> <dd class="col-10">{{ vm.vcpu }}{% translate '核' %}</dd>
                        <dt class="col-2 text-right">MEM:</dt> <dd class="col-10">{{ vm.mem }}GB</dd>
                        <dt class="col-2 text-right">{% translate '备注' %}:</dt> <dd class="col-10">{{ vm.remarks }}</dd>
                    </dl>
                </div>
                <hr style=" height:1px;border:1px;border-top:1px solid #185598;"/>
                <form class="form-horizontal" id="id-form-vm-edit">
                    <div class="form-group row">
                        <label for="id-flavor" class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '新的配置' %}</label>
                        <div class="">
                            <div class="card">
                                <div class="card-body">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">{% translate '模板样式' %}</span>
                                        </div>
                                        <select name="flavor_id" class="form-control" id="id-flavor">
                                            <option value="" data-vcpu="" data-ram="">{% translate '自定义' %}</option>
                                            {% for f in flavors %}
                                                <option value="{{ f.id }}" data-vcpu="{{ f.vcpus }}" data-ram="{{ f.ram }}">CPU: {{ f.vcpus }}{% translate '核' %} / RAM: {{ f.ram }}GB</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div id="custom-flavor">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">CPU</span>
                                            </div>
                                            <input name="vcpu" type="text" class="form-control" placeholder="可以为空，不修改" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" aria-label="CPU">
                                            <div class="input-group-append">
                                                <span class="input-group-text">核</span>
                                            </div>
                                        </div>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">RAM</span>
                                            </div>
                                            <input name="mem" type="text" class="form-control" placeholder="可以为空，不修改" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" aria-label="RAM">
                                            <div class="input-group-append">
                                                <span class="input-group-text">GB</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="offset-sm-0 col-sm-3 offset-md-1 col-md-2">
                            <button type="submit" class="btn btn-primary float-right">{% translate '修改' %}</button>
                        </div>
                    </div>
                    <input name="mem_unit" type="hidden" id="mem_unit" value="GB">
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'evcloud/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'vms/vms_edit.js' %}"></script>
{% endblock %}
